import React, { Component } from 'react'
import { Table ,Button,Upload,Popover,Space} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios'
import {connect} from 'react-redux'
const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      render: text => <a href="">{text}</a>,
    },
    {
      title: '轮播图地址',
      className: 'column-money',
      dataIndex: 'url',
      align: 'left',
      render:(text,record) =>{ //气泡卡片
        let content =(
          <div>
            <p>{record.url}</p>
          </div>
        )
        return <Popover content={content} title="地址">
          <Button type="primary">地址</Button>
        </Popover>
      }
    },
    {
      title:'状态',
      dataIndex:'status',
      key:'status',
      render:(text,record) =>{
        console.log(222,record)
        if(record.status === 1 + ''){
          return <Space size="middle">
          <a>已激活</a>
        </Space>
        }else{
          return <Space size="middle">
          <a>未激活</a>
        </Space>
        }
      }
    },
    {
      title: '编辑',
      dataIndex: 'emit',
      key:'emit',
      render: (text, record) => {
        if(record.status === 1 + ''){
          return <div>
                <Space size="middle">
                  <a>删除</a>
                </Space>&nbsp;&nbsp;&nbsp;
                <Space size="middle">
                  <a>下线</a>
                </Space>
          </div>
        }else{
          return <div>
                <Space size="large">
                  <a>删除</a>
                </Space>&nbsp;&nbsp;&nbsp;
                <Space size="large">
                  <a>上线</a>
                </Space>
        </div>
        }
      }
    },
]
const fileList = [
    {
        uid: '-1',
        name: 'xx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }
]


class Index extends Component {
    state={
        show:false
    }
    show(){
        let {show} = this.state
        console.log(1)
        this.setState({
            show:!show
        })  
    }
    submit(){
        this.props.lunbo()
    }
    componentDidMount(){
      this.props.lunbo()
    }
    render() {
      // console.log(456,this.props)
        return (
           <div className="banner" >
                <Button type="primary" shape="round" onClick={_=> this.show()}>新增轮播图</Button>
                <Table columns={columns} dataSource={this.props.list ? this.props.list : ''} bordered style={{display:this.state.show ? 'none' : 'block'}}>
                </Table>
                <div className="chuan" style={{display:this.state.show ? 'block' : 'none'}}>
                    <Upload
                    action="http://localhost:3000/getimg"
                    name="img"
                    listType="picture"
                    defaultFileList={[...fileList]}
                    >
                    <Button icon={<UploadOutlined/>}>选择图片</Button>
                    </Upload>
                    <Button type="primary" shape="round" size="middle" className="submit" onClick={_ => this.submit()}>提交</Button>
                </div>
                <br />
                
            </div>        
                
        )
    }
}
const mapStateToProps = (store) => {
    console.log(123, store)
    return {
      list: store.lunbo
    }
  }
  const mapDispatchToProps = (dispatch) => {
    return {
      lunbo() {
        dispatch(_ => {
          axios.get('/lunbo').then(res => {
            dispatch({
              type: 'LUNBO',
              data: res.data.msg
            })
          })
        })
      }
    }
  }
export default connect(mapStateToProps, mapDispatchToProps)(Index)
